import React from "react";
import { Layout } from 'antd';
import SiderComponents from "@Components/SiderComponents";
import HeaderComponents from "@Components/HeaderComponents";
import ContentComponents from "@Components/ContentComponents";
import RouterAuth from '@utils/routerAuth'
/**
 * @date: 2024-07-13 23:39:42
 * @description: 引入react-redux某些钩子函数
 * useSelector: 用于获取redux的初始值的钩子函数
 * @modifyContent:
 * @author: Forever丿顾北
**/
import { useSelector } from 'react-redux'

// Outlet 是 React Router v6 中的一个新概念，用于代替 v5 中的 <Switch> 组件。
// 它用于在父级路由组件中渲染子路由组件。在 React Router v6 中，路由配置更加灵活，可以在不同层级的组件中嵌套使用。
// import { Outlet } from "react-router-dom"; 
// 创建组件,使用hooks

const Main =  () => {
  // 获取展开收起的状态 语法 statre.命名空间(即index.js中reducer的tab值).属性/状态值
  const CollapseStart = useSelector(state => state.MenuSlice.isCollapse)
  return (
    <RouterAuth>
    <Layout id="LayoutBox" hasSider>
        <SiderComponents CollapseStart={CollapseStart}/>
      <Layout id="ContentLayoutBox">
        <HeaderComponents CollapseStart={CollapseStart}/>
        <ContentComponents/>
      </Layout>
    </Layout>
  </RouterAuth>
  );
}

export default Main;